<template>
	<view>
		<!-- pages/user/assets/index.wxml -->
		<navbar></navbar>
		<view class="container">
			<view class="container-img">
				<image :src="list[0].goods_image" mode="aspectFill"></image>
			</view>
			<view v-if="0 < list.length"  class="container-warp"   @touchstart="start"   @touchmove.stop.prevent="move"  :style="{height:moveX + 'vh', 
			transition: transition }">
				<view class="container-warp-title">
					{{ list[0].goods_name }}
				</view>
				
				<scroll-view  @scrolltolower="asdc" scroll-y="true" class="scrollDiv">
					<view class="collection-Box-item" v-for="item in list" :key="item.order_id" @tap.stop.prevent="onAssetsTaped(item)">
						<view class="Boxa">
							<view class="Boxa-name">
								编号
							</view>
							<view class="Boxa-namea">
								<view class="number">
									{{item.sort_no}}
								</view>
								
							</view>
						</view>
						<view v-if="item.is_sale == 1" class="number">
							寄售中
						</view>
						<view v-else-if=" item.is_frozen == 1 && item.is_hatch == 0" class="number">
						已锁仓 
						</view>
						<view v-else-if=" item.is_frozen == 1 && item.is_hatch == 1" class="number">
						孵化中 
						</view>
						<view v-else-if="item.can_sale == 1" class="number">
							可寄售 
						</view>
						<view v-else="item.can_sale == 1" class="number">
							生成中
						</view>
						<view class="Boxb">
							购买价
						</view>
						<view class="Boxc">
							{{item.total_price}}
							<view class="icon">
								<image src="../../../../static/images/user/icon_righta.png" ></image>
							</view>
						</view>
					</view>
				
				<view class="collection-Box">
					
				</view>
				</scroll-view>
				
			</view>
		</view>
	</view>
</template>

<script>
	
	const app = getApp();
	export default {
		
		data() {
			return {
				goods_id: '',
				scrollTop: 0,
				list: [],
				loading: true,
				page: 1,
				hasMore: false,
				easyLoadimage: {
					scrollTop: 50
				},

				touch:{},
				startData: {
					clientX: '',
					clientY: '',
				},
				moveX: 70,
				transition:"",
				bottomY:0,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.options = options;
			this.requestData();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// this.page = 1
			// this.list = []
			// this.requestData();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.page = 1;
			this.requestData(() => {
				uni.stopPullDownRefresh();
			});
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			console.log("1111111")
			// uni.stopPullDownRefresh();
			
			if (this.hasMore && !this.loading) {
				this.requestData();
			}
		},
		onPageScroll(e) {
			console.log(e,'1111')
			this.scrollTop = e.scrollTop;
		},
		methods: {
			asdc(){
				console.log("触底了")
				if (this.hasMore && !this.loading) {
					this.requestData();
				}
			},
		 start(e){  //@touchstart 触摸开始
		  this.transition = '.1s';
		  this.startData.clientX = e.changedTouches[0].clientX;   //手指按下时的X坐标         
		  this.startData.clientY = e.changedTouches[0].clientY;   //手指按下时的Y坐标
			console.log('@touchstart 触摸开始')
		},
		move(event) {  //@touchmove触摸移动
		console.log("111")
		 let touch = event.touches[0];  //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
		        this.touch = touch;
		        if(touch.clientY < this.startData.clientY) {  //向左移动
		            if(this.moveX === 50) {
		                this.moveX = 70
		            }
		        }
				
				if(touch.clientY > this.startData.clientY) {  //向左移动
				    if(this.moveX === 70) {
				        this.moveX = 50
				    }
				}
			},
			
			
			requestData: function(complete) {
				this.loading = true;
				app._get(
					'user.order/collectListDetail', Object.assign({}, this.options, {
						page: this.page,
					}), (res) => {
						if (1 == res.code) {
							let {
								page,
								list,
								hasMore
							} = this;
			
							if (1 == page) {
								list.length = 0;
							}
			
							let {
								data,
								total
							} = res.data.list;
							list = [...list, ...data];
							hasMore = total > list.length;
			
							if (hasMore) {
								page++;
							}
			
							this.page = page;
							this.list = list;
							this.hasMore = hasMore;
							console.log(this.list)
						}
					},
					null,
					() => {
						this.loading = false;
						if (complete) {
							complete();
						}
					}
				);
			},
			onAssetsTaped: function(assets) {
				uni.navigateTo({
					url: `../detail/detail?order_id=${assets.order_id}`,
					events: {
						someEvent:res=>{
							console.log('刷新数据')
							this.requestData();
						}
					}
				});
			}
			
		}
	};
</script>
<style>
	page {
		background: #3D3C40 !important;
	}
</style>
<style lang="scss" scoped>
	/deep/.uni-scroll-view-content{
		padding-bottom: 200rpx;
	}
	.container{
		min-height: 100vh;
		position: relative;
		overflow: hidden;
	}
	.container-img{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 32rpx;
	}
	.container-img image{
		width: 686rpx;
		height: 768rpx;
	}
	.container-warp{
		position: absolute;
		bottom: 0;
		height:50vh;
		width: 100%;
		touch-action: none;
		// overflow: scroll;
		background: #292929;
	}
	.container-warp-title{
		height: 44rpx;
		
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-shadow: 0px 0px 8px rgba(214,176,90,0.08);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 32rpx 0rpx;
	}
	.collection-Box{
		// padding: 0 32rpx;
		// margin-top: 22rpx;
		// margin-bottom: 62rpx;
		height: 200rpx;
	}
	.scrollDiv{
		height: 100%;
	}
	.collection-Box-item{
		display: flex;
		color: #fff;
		justify-content: space-between;
		align-items: center;
		// padding: 0rpx 32rpx ;
		margin: 0rpx 32rpx;
		// margin-bottom: 22rpx;
		margin-top: 60rpx;
		padding-bottom: 22rpx;
		border-bottom: 2rpx solid #3a3a3a;
	}
	.Boxa{
		display: flex;
		background: #D8B255;
		color: #000;
		align-items: center;
		font-size: 28rpx;
	}
	.Boxb{
		font-size: 24rpx;
		font-weight: 400;
		color: #B0B0B0;
		line-height: 34rpx;
	}
	.Boxc{
		display: flex;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 42rpx;
	}
	.Boxa-name{
		margin: 0 10rpx;
	}
	.Boxa-namea{
		color: #D8B255;
		background-color: #3D3730;
		display: flex;
		margin: 3rpx;
		padding: 5rpx;
		// width: 292rpx;
		justify-content: space-between;
		.number{
			margin:0 10rpx;
		}
	}
	.icon image{
		width: 10rpx;
		height: 18rpx;
		margin-left: 10rpx;
	}
</style>
